<template>
	<view>
		
		<view class="content_content list_zt" v-for="(item,index) in dataArray" :key="index">
			<view class="line" :class="{none:index==(dataArray.length-1)}"><!-- 中线 -->
				<view class="dot"></view> <!-- 圆点 -->
			</view>
			<view class="zhuangtai shadow">
				<view class="ztai">{{zhaungtai(item.typeid)}}</view>
				<view class="shijian">{{publics.timestampToTime(item.changetime)}}</view>
				<view class='beijing'
					v-if="item.typeid==2 || item.typeid==3 || item.typeid==4 || item.typeid==5 || item.typeid==6 || item.typeid==10 || item.typeid==13 || item.typeid==9 || item.typeid==12">
					<view class="beizhu_" v-if="item.remark !== ''">备注信息：{{item.remark}}</view>
					<view class="quxiao_yuanyin"
						v-if=" item.typeid==5  || item.typeid==9 || item.typeid==10  || item.typeid==12 || item.typeid==13">
						原因：{{item.msg}}</view>
					<view class="_photo" v-if="item.img !== ''" :class="{jvli:item.img !=''&& item.remark==''}">
						<view class="photo" v-for="(imgurl,index) in item.img.split(',')" :key="index">
							<image class="suodanimg" :src="imgurl" @click="publics.tupian(item.img,index)">
							</image>
						</view>
					</view>
				</view>
				<view class="content_xinx">
					<view class="touxiang">
						<image :src="item.userimg" mode=""></image>
						<view class="name_kz">{{item.username}}</view>
					</view>
					<view class="end_money" v-if="item.typeid==2 || item.typeid==3 ">
						<view class="qian">{{item.msg}}<text v-if="item.typeid==2 || item.typeid==3 ">元</text>
						</view>
						<view class="danwei">(金额)</view>
					</view>
					<!-- <view class="end_money"
						v-if=" item.typeid==5  || item.typeid==9 || item.typeid==10  || item.typeid==12 || item.typeid==13">
						<view class="qian">{{item.msg}}</view>
						<view class="danwei">(原因)</view>
					</view> -->
					<view class="end_money" v-if="item.typeid==4">
						<view class="qian">{{item.msg}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataArray:{
				// type:Array
			}
		},
		data() {
			return {
			}
		},
		mounted(){
		},
		methods: {
			zhaungtai(val) {
				if (val == 0) {
					return "已领取"
				} else if (val == 1) {
					return "领取客资"
				} else if (val == 2) {
					return "活动锁单"
				} else if (val == 3) {
					return "订单成交"
				} else if (val == 4) {
					return "转让客资"
				} else if (val == 5) {
					return "放弃客资"
				} else if (val == 6) {
					return "取消订单申请"
				} else if (val == 8) {
					return "取消订单成功"
				} else if (val == 9) {
					return "取消订单失败"
				} else if (val == 10) {
					return "客资退回申请"
				} else if (val == 11) {
					return "客资退回成功"
				} else if (val == 12) {
					return "客资退回失败"
				} else if (val == 13) {
					return "取消活动锁单"
				}
			},
		}
	}
</script>

<style scoped="scoped" lang="less">
	.list_zt {
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// 底部距离
		// margin-bottom: 100rpx;
	}
	.list_zt:last-child {
		margin-bottom: 75rpx;
	}
	.zhuangtai {
		width: calc(100% - 114rpx);
		margin-bottom: 72rpx;
		margin-top: 16rpx;
	}
	.ztai {
		color: #333333;
		font-size: 30rpx;
		padding-top: 30rpx;
		padding-left: 30rpx;
	}
	.shijian {
		color: #999999;
		font-size: 20rpx;
		padding-left: 30rpx;
		padding-top: 8rpx;
		padding-bottom: 24rpx;
	}
	.beijing {
		background-color: #EEEEEE;
		width: calc(100% - 50rpx);
		margin: auto;
		padding-bottom: 2rpx;
		border-radius: 6rpx;
	}
	.beizhu_ {
		font-size: 24rpx;
		color: #666666;
		padding-left: 30rpx;
		padding-top: 20rpx;
	
	}
	.quxiao_yuanyin {
		font-size: 24rpx;
		color: #666666;
		padding-left: 30rpx;
		padding-top: 20rpx;
		margin: auto;
		margin-right: 30rpx;
		padding-bottom: 10rpx;
	}
	._photo {
		display: flex;
	}
	.photo {
		width: 106rpx;
		height: 116rpx;
		border: solid 6rpx #FFFFFF;
		border-radius: 6rpx;
		margin-left: 22rpx;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.suodanimg {
		width: 106rpx;
		height: 116rpx;
	}
	.content_xinx {
		display: flex;
		justify-content: space-between;
	}
	.touxiang {
		display: flex;
		padding-left: 30rpx;
		padding-top: 24rpx;
		padding-bottom: 30rpx;
	
		image {
			width: 34rpx;
			height: 34rpx;
			border-radius: 50%;
		}
	
		.name_kz {
			color: #333333;
			font-size: 26rpx;
			padding-left: 13rpx;
		}
	}
	.end_money {
		display: flex;
		padding-right: 30rpx;
		padding-top: 24rpx;
		padding-bottom: 30rpx;
	}
	.qian {
		font-size: 24rpx;
		color: #FF609A;
		overflow: auto;
		white-space: nowrap;
		width: 234rpx;
		margin-right: 10rpx;
		text-align: right;
	}
	.danwei {
		font-size: 20rpx;
		color: #999999;
	}

//激活元素
// .active{
// 	border: 1rpx solid #FF609A;
// }
// 隐藏元素
.none{
	background-color: rgba(0,0,0,0) !important;
}

.line{
		margin: 0 20rpx 0 20rpx;
		width: 2rpx;
		background: #FF609A;
		.dot{
			width: 20rpx;
			height: 20rpx;
			border: #FF609A solid 2rpx;
			border-radius: 50%;
			position: relative;
			left: -10rpx;
			background-color: #FFFFFF;
		}
	}
</style>
 
